* {
    margin: 0;
    margin-top: 5.3%;
    margin-bottom: 0%;
    width: auto;
    height: auto;
    padding: auto;
    margin-left: auto;
    margin-right: auto;
    font-size: "Helvetica";
    text-decoration: currentColor;
    background-color: black;
}

header#canvas {
    width: 59vw;
    height: 28vw;
    background-color: #E6E6E6;
    display: block;
}

section.B1 {
    margin-block: 1%;
    width: 10%;
    height: 76%;
    margin-left: 30%;
    display: inline-block;
}

section.B2 {
    width: 10%;
    height: 4%;
    margin-left: 30%;
    margin-top: 0%;
    display: block;
    margin-block: -1.5%;
}

section.B3 {
    width: 10%;
    height: 16.4%;
    margin-left: 30%;
    margin-top: 0%;
    display: block;
    margin-block: 1.5%;
}

section.B4 {
    margin-block: -47.03%;
    width: 10%;
    height: 37%;
    margin-left: 40%;
    display: block;
}

section.B5 {
    width: 10%;
    height: 4%;
    margin-left: 40%;
    margin-top: 46%;
}

section.B6 {
    width: 10%;
    height: 24%;
    margin-left: 40%;
    margin-top: 0%;
}

section.B7 {
    width: 10%;
    height: 4%;
    margin-left: 40%;
    margin-top: 0%;
}

section.B8 {
    width: 10%;
    height: 29.15%;
    margin-left: 40%;
    margin-top: 0%;
}

section.B9 {
    margin-block: -45.53%;
    width: 10%;
    height: 55%;
    margin-left: 50%;
    display: block;
}

section.B10 {
    width: 10%;
    height: 4%;
    margin-left: 50%;
    margin-top: 45%;
}

section.B11 {
    width: 10%;
    height: 38%;
    margin-left: 50%;
    margin-top: 0%;
}

section.B12 {
    margin-block: -45.53%;
    width: 10%;
    height: 20%;
    margin-left: 60%;
    display: block;
}

section.B13 {
    width: 10%;
    height: 4%;
    margin-left: 60%;
    margin-top: 45%;
}

section.B14 {
    width: 10%;
    height: 60%;
    margin-left: 60%;
    margin-top: 0%;
}

section.B15 {
    width: 10%;
    height: 4%;
    margin-left: 60%;
    margin-top: 0%;
}

section.B16 {
    width: 10%;
    height: 9.1%;
    margin-left: 60%;
    margin-top: 0%;
}


/* BACKGROUND COLORS*/

.B1 {
    background-color: #DB7695;
}

.B2 {
    background-color: #57419F;
}

.B3 {
    background-color: #DB7695;
}

.B4 {
    background-color: #C670B7;
}

.B5 {
    background-color: #57419F;
}

.B6 {
    background-color: #C670B7;
}

.B7 {
    background-color: #57419F;
}

.B8 {
    background-color: #C670B7;
}

.B9 {
    background-color: #57419F;
}

.B10 {
    background-color: #C670B7;
}

.B11 {
    background-color: #57419F;
}

.B12 {
    background-color: #2546B6;
}

.B13 {
    background-color: #C670B7;
}

.B14 {
    background-color: #2546B6;
}

.B15 {
    background-color: #C670B7;
}

.B16 {
    background-color: #2546B6;
}


/* time for hovers */

.B1:hover {
    background-color: #ce7e00;
}

.B2:hover {
    background-color: #ffbf00;
}

.B3:hover {
    background-color: #6e3100;
}

.B4:hover {
    background-color: #ff7c00;
}

.B5:hover {
    background-color: #f54c00;
}

.B6:hover {
    background-color: #d11142;
}

.B7:hover {
    background-color: #f3a02a;
}

.B8:hover {
    background-color: #00b159;
}

.B9:hover {
    background-color: #e73131;
}

.B10:hover {
    background-color: #8e0000;
}

.B11:hover {
    background-color: #690000;
}

.B12:hover {
    background-color: #e69138;
}

.B13:hover {
    background-color: #ffd966;
}

.B14:hover {
    background-color: transparent;
}

.B15:hover {
    background-color: #f90a88;
}

.B16:hover {
    background-color: #074177;
}